<template>
  <div class="permission-container">
    <el-card>
      <!-- 操作按钮 -->
      <el-button type="success" icon="el-icon-plus" @click="handleAdd" style="margin-bottom: 20px;">新增权限</el-button>

      <!-- 权限树 -->
      <el-table :data="tableData" border stripe v-loading="loading" row-key="id" :tree-props="{children: 'children'}">
        <el-table-column prop="name" label="权限名称" width="200"></el-table-column>
        <el-table-column prop="permissionCode" label="权限编码"></el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.type === 1 ? 'primary' : 'success'">
              {{ scope.row.type === 1 ? '菜单' : '按钮' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="路由路径"></el-table-column>
        <el-table-column prop="icon" label="图标" width="100"></el-table-column>
        <el-table-column prop="sort" label="排序" width="80"></el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限编码" prop="permissionCode">
          <el-input v-model="form.permissionCode" placeholder="如：system:user:add"></el-input>
        </el-form-item>
        <el-form-item label="父权限">
          <el-select v-model="form.parentId" placeholder="请选择父权限" clearable style="width: 100%;">
            <el-option label="顶级权限" :value="0"></el-option>
            <el-option
              v-for="item in permissionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="路由路径" v-if="form.type === 1">
          <el-input v-model="form.url" placeholder="如：/system/user"></el-input>
        </el-form-item>
        <el-form-item label="图标" v-if="form.type === 1">
          <el-input v-model="form.icon" placeholder="如：el-icon-user"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionTree, getPermissionList, addPermission, updatePermission, deletePermission } from '@/api/permission'

export default {
  name: 'Permission',
  data() {
    return {
      tableData: [],
      permissionList: [],
      loading: false,
      dialogVisible: false,
      dialogTitle: '',
      form: {
        id: null,
        name: '',
        permissionCode: '',
        parentId: 0,
        type: 1,
        url: '',
        icon: '',
        sort: 0,
        status: 1
      },
      rules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        permissionCode: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }]
      },
      submitLoading: false
    }
  },
  created() {
    this.loadData()
    this.loadPermissionList()
  },
  methods: {
    loadData() {
      this.loading = true
      getPermissionTree().then(res => {
        this.tableData = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    loadPermissionList() {
      getPermissionList().then(res => {
        this.permissionList = res.data.filter(item => item.type === 1)
      })
    },
    handleAdd() {
      this.dialogTitle = '新增权限'
      this.form = {
        id: null,
        name: '',
        permissionCode: '',
        parentId: 0,
        type: 1,
        url: '',
        icon: '',
        sort: 0,
        status: 1
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑权限'
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          const api = this.form.id ? updatePermission : addPermission
          api(this.form).then(() => {
            this.$message.success('操作成功')
            this.dialogVisible = false
            this.loadData()
            this.loadPermissionList()
            this.submitLoading = false
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确定删除该权限吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePermission(row.id).then(() => {
          this.$message.success('删除成功')
          this.loadData()
          this.loadPermissionList()
        })
      })
    }
  }
}
</script>

<style scoped>
.permission-container {
  padding: 20px;
}
</style>
